<template>
	<div class="statistics">
		<div class="bg-f" style="margin:24px  0px 15px;">
			<div class="" style="padding: 15px 16px 15px 15px;">
				<form action="/">
					<!-- search 事件在点击键盘上的搜索/回车按钮后触发，cancel 事件在点击搜索框右侧取消按钮时触发（自己改为了搜索）。 -->
					<van-search class="flex-c" style="color: #0580FF;height: 33px;" v-model="text" show-action
						placeholder="请输入设备名称" @search="tabtoplist(active)">
						<template #action>
							<div @click="tabtoplist(active)">搜索</div>
						</template>
					</van-search>
				</form>
				<div class="flex-space " style="margin-top: 15px;">
					<div class="" v-for="(item,index) in statis_tab" :key="index" v-model="active"
						@click="tabtoplist(index)" :class="active==index ? 'activeselect' : 'activeno'"
						style="height:57px;width:70px;line-height: 47px;font-size: 15px;font-weight: bold; font-family: auto;">
						{{item.name}}
					</div>
				</div>
			</div>
		</div>
		<div class=""
			:style="`margin-bottom: 59px;margin-top: 10px;width: 100%;height:${height-215}px; overflow-y: scroll; `">
			<van-pull-refresh v-model="isLoading" @refresh="onRefresh()">
				<van-list v-model="load" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="20"
					:error.sync="error" error-text="请求失败，点击重新加载">
					<div class="bg-f" style="margin:0px  0px 15px;padding: 0px 15px;"
						v-for="(item,index) in statis_content" :key="index">
						<div class="flex" style="padding:15px 0px ;">
							<div class="" style="width: 25px;height: 25px;margin-right: 10px;">
								<img :src="item.imgUrl">
							</div>
							<div class="flex-c"
								style="margin-right: 10px;color: #000000;font-weight: bold;font-size: 16px;font-family: auto;">
								{{item.terminalId}}
							</div>
							<div class="flex-c"
								style="padding:4px 8px 4px 8px ;background: #F8B800;border-radius: 5px;color: #FFFFFF;font-weight: 500;font-size: 12px;font-family: auto;">
								{{item.shopName}}
							</div>
						</div>
						<div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;"></div>
						<div class="flex-space" style="padding:15px 0px ;">
							<div class="" style="font-weight: bold;font-size: 14px;font-family: auto;color: #666666;">
								设备昵称:
							</div>
							<div class="" style="font-weight: bold;font-size: 14px;font-family: auto;color: #000000;">
								{{item.terminalName}}
							</div>
						</div>
						<div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;"></div>
						<div class="flex-space" style="padding:15px 0px ;">
							<div class="" style="font-weight: bold;font-size: 14px;font-family: auto;color: #666666;">
								印量:
							</div>
							<div class="" style="font-weight: bold;font-size: 14px;font-family: auto;color: #0580FF;">
								{{ item.printQuantity }}
							</div>
						</div>
						<div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;"></div>
						<div class="flex-space" style="padding:15px 0px ;">
							<div class="" style="font-weight: bold;font-size: 14px;font-family: auto;color: #666666;">
								金额:
							</div>
							<div class="" style="font-weight: bold;font-size: 14px;font-family: auto;color: #15C78B;">
								{{ item.amount }}
							</div>
						</div>
						<div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;"></div>
						<div class="flex-space " style="padding:15px 0px;">
							<div class="flex-c" @click="detalis(index)">
								<div class="flex-c" style="width: 13px;height: 13px;margin-right: 6px;">
									<img src="../../assets/newStatis/sigh2x.png">
								</div>
								<div class=""
									style="font-weight: 500;font-size: 13px;font-family: auto;color: #0580FF;margin-top: 1px;">
									查看营收明细
								</div>
							</div>
							<div id="" @click="refund(index)"
								style="padding: 4px 11px 4px 11px;border: 1px solid #0580FF;border-radius: 5px;font-weight: 500;font-size: 12px;font-family: auto;color: #0580FF;">
								退款
							</div>
						</div>
					</div>
				</van-list>
			</van-pull-refresh>
		</div>
	</div>
</template>
<script>
	import {
		Statistics
	} from '@/api/statistics/statistics.js'
	import {
		List
	} from 'vant'

	export default {
		data() {
			return {
				onRefreshitem: '',
				statis_tab: [{
					name: '全部',
					order: ''
				}, {
					name: '当天',
					order: 'day'
				}, {
					name: '本月',
					order: 'mount'
				}, {
					name: '本年',
					order: 'year'
				}],
				load: false,
				active: 0,
				error: false,
				orders: '', //查询参数
				text: '', //搜索参数
				statis_content: [], //切换获取的内容
				isLoading: false, //下拉 loadingloading
				loading: false, //List
				finished: false,
				list: [],
				pageindex: 1, //页数
				pagesize: 10,
				datacount: 0,
				pageCount: 0,
				height: 100 //默认高度
			}
		},
		// created() {

		// 	// this.tabtoplist(0)
		// },
		created() {
			if (this.$route.query.staticDetails) {
				this.active = window.localStorage.getItem('actives') * 1;
				this.tabtoplist(this.active);
				// this.keeplive=true;
				window.localStorage.removeItem('active')
			} else {
				// this.keeplive=false;
				this.tabtoplist(0);
			}
		},
		mounted() {
			this.client() //获取高度

		},
		methods: {
			// activename(num){
			// 	this.active=num;
			// },
			onLoad() {
				let timer = setTimeout(() => { // 定时器仅针对本地数据渲染动画效果,项目中axios请求不需要定时器
					this.pageindex++ // 分页数加一
					this.Statistics1() // 调用上面方法,请求数据
					this.finished && clearTimeout(timer) //清除计时器
				}, 100)
			},
			client() {
				this.$nextTick(() => {
					this.height = document.body.clientHeight
				})
			},
			refund(index) {
				this.$router.push({
					path: '/refund',
					query: {
						userId: this.statis_tab[this.active].order,
						username: this.statis_tab[this.active].name,
						terminalId: this.statis_content[index].terminalId
					}
				})
			},
			detalis(index) {
				this.$router.push({
					path: '/details',
					query: {
						userId: this.statis_tab[this.active].order,
						username: this.statis_tab[this.active].name,
						terminalId: this.statis_content[index].terminalId
					}
				})
			},
			seletop(index) {
				this.active = index;
				console.log(this.active)
			},
			// 点击顶部切换
			tabtoplist(num) {
				// console.log(item,'item');
				console.log(num, 'num')
				this.active = num;
				// this.onRefreshitem=item;//点击的时候吧item传输过去
				console.log(num, this.active)
				return new Promise((resolve, reject) => {
					this.finished = false
					// console.log( this.load)
					this.statis_content = []
					this.pageindex = 1
					this.load = true
					// console.log(num)
					// if ( this.active!=num){
					this.datacount = 0
					// }
					this.active = num
					window.localStorage.setItem('actives', num)
					this.orders = this.statis_tab[num].order
					console.log(this.orders)
					//默认查找的所有的
					// this.loading = true
					this.Statistics1()
				})
			},
			Statistics1() {
				Statistics({
					'pageindex': this.pageindex, //0
					'pagesize': this.pagesize, //10 每页的数量
					'postdata': [{
							'field': 'queryType',
							'value': this.orders
						},
						{
							'field': 'queryName',
							'value': this.text
						}
					]
				}).then(res => {
					this.text = ''
					console.log(res, 'shuju')
					if (res.data === null) { // 判断获取数据条数若等于0
						this.statis_content = [] // 清空数组
						this.finished = true // 停止加载
					}
					this.datacount = res.datacount;
					if (res.datacount != null) {
						this.statis_content.push(...res.data)
					}

					// alert(this.statis_content.length)
					// alert(res.datacount)
					if (this.statis_content.length >= res.datacount) {
						this.finished = true // 结束加载状态
					}
					this.text = ''
					this.load = false
					// this.loading = false
					this.isLoading = false
					// console.log(res, '数据')
					// resolve()
				})
			},
			onSubmit() {
				console.log('onSubmit')
				this.tabtoplist(this.active)
			},
			// 下拉
			onRefresh() {
				// if (this.active == 0) {
				// 	this.tabtoplist(this.active)
				// 	this.isLoading = true
				// }

				this.tabtoplist(this.active)
				this.isLoading = true


				// if (this.statis_content || this.statis_content.length < 11) {
				//   this.isLoading = false
				// }
			}

		}
	}
</script>
<style lang="scss">
	/* 修复input 背景不协调 和光标变色 */
	/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
	// 背景改白色
	$bg: #fff;
	$light_gray: #fff;
	$cursor: #fff;
</style>
<style>
	.statistics .van-search__action {
		color: #0580FF;
	}

	.statistics .van-search__content {
		border-radius: 8px;
	}

	.statistics {
		margin: 0px 15px;
		height: 100vh;
	}

	.statistics .bg-f {
		border-radius: 5px;
		background-color: #FFFFFF;
	}

	.statistics .activeselect {
		height: 54px;
		color: #FFFFFF;
		width: 70px;
		text-align: center;
		background: url(../../assets/newStatis/button2x.png) no-repeat;
		background-size: 100%;
	}

	.statistics .activeno {
		color: #000000;
		height: 47px;
		text-align: center;
		width: 70px;
		background: url(../../assets/newStatis/button22x.png) no-repeat;
		background-size: 100%;
	}
</style>
